<template>
  <Panel class="equipment-list-list" title="设备列表" v-bind="$attrs">
    <!-- 头部统计 -->
    <div class="header-summary">
      <div class="switchs">
        <span :class="`title qbb ${isQbb && ' is-active'}`" @click="setIsQbb(true)">情报板</span>
        <span :class="`title ${!isQbb && ' is-active '}`" @click="setIsQbb(false)">摄像机</span>
      </div>

      <!-- 情报版统计数 -->
      <div class="summary-item" v-if="isQbb">
        <span class="on-line header-common"
:class="{ active: !isWaring }"
@click="setStatus(false)"
          >在线<span class="value">{{ state.statistic.qbbOnline || 0 }}</span></span
        >
        <span class="warning header-common"
:class="{ active: isWaring }"
@click="setStatus(true)"
          >异常<span class="value">{{ state.statistic.qbbOffline || 0 }}</span></span
        >
      </div>

      <!-- 摄像统计数 -->
      <div class="summary-item" v-else>
        <span class="on-line header-common"
:class="{ active: !isWaring }"
@click="setStatus(false)"
          >在线<span class="value">{{ state.statistic.cameraOnline || 0 }}</span></span
        >
        <span class="warning header-common"
:class="{ active: isWaring }"
@click="setStatus(true)"
          >异常<span class="value">{{ state.statistic.cameraOffline || 0 }}</span></span
        >
      </div>
    </div>

    <!-- 情报版 视频列表 -->
    <div class="list-wrapper">
      <ScrollTable
        :tableLoading="state.loading"
        scroll="calc(100% - 0.32rem)"
        rowKey="rowKey"
        :columns="columns"
        :dataSource="dataSource"
      >
      </ScrollTable>
    </div>
  </Panel>
</template>
<script>
export default {
  name: 'EquipmentList'
}
</script>
<script setup>
/**
 * 设备监测列表
 * @author 邓清波
 * @date 2022/10/215
 */
import Panel from '../../components/panel/index.vue'
import { reactive, ref, computed, nextTick, onMounted, getCurrentInstance, onUnmounted } from 'vue'
import Switch from '../../components/detail/Switch.vue'
import ScrollTable from '@/views/business-component/components/scroll-table'
import monitorApi from '../../api/monitor'
import baseServiceApi from '../../api/base-service'
import Empty from '../../components/empty'
import { get } from '@/utils'
import { useStore } from 'vuex'
import useMapOperates from '@/hooks/useMapOperates'
import { getDict } from '@/core/dictionaries'

/*
 * 摄像 情报版先不打点
 * */

/** *
 * 情报版
 * 公路：在线状态 (1.在线,  2.离线 , 3.异常)
 * 高速：在线状态 (0：在线, 1,2离线 , 3异常)
 *
 * **/

const store = useStore()
const orgId = computed(() => (store.state.user.userInfo.orgInfos ? store.state.user.userInfo.orgInfos[0].orgId : ''))
const handleDark = useMapOperates()
const { proxy } = getCurrentInstance()

const isWaring = ref(true) // 是否是查询异常维度的
const isQbb = ref(true) // 是否显示情报版
const state = reactive({
  list: [],
  statistic: {},
  loading: false
})
const roadType = computed(() => store.state.config.roadType)
const isProvince = computed(() => store.state.config.isProvince)
const areaCode = computed(() => store.state.config.areaCode)

const onLine = { text: '在线', className: 'on-line' }
const offLine = { text: '离线', className: 'off-line' }
const warning = { text: '异常', className: 'warning' }
const statusObj = {
  // statusObj[2] 公路
  // statusObj[1] 高速
  2: { 1: onLine, 2: offLine, 3: warning },
  1: { 0: onLine, 1: offLine, 2: offLine, 3: warning }
}

const columns = ref([])
const dataSource = ref([])
// 情报板表头
const bordColumns = [
  {
    title: '设备名称',
    dataIndex: 'vmsName',
    key: 'vmsName',
    width: '60%',
    ellipsis: true
  },
  {
    title: '类型',
    dataIndex: 'vmsType',
    key: 'vmsType',
    ellipsis: true,
    width: '22%',
    customRender({ value }, text) {
      if (value === 'null') return ''
      return getDict('QBB-TYPE', value, '') || value
    }
  },
  {
    title: '异常信息',
    dataIndex: 'errorMsg',
    key: 'errorMsg',
    customRender({ value, record }) {
      if (record.vmsStatus === 1) return '' // 在线就不显示异常信息

      return record.errorMsg || mapperStatus(record.vmsStatus).text
    }
  }
]
// 摄像机表头
const videoColumns = [
  {
    title: '设备名称',
    dataIndex: 'cameraName',
    key: 'cameraName',
    width: '60%',
    ellipsis: true
  },
  {
    title: '所在路线',
    dataIndex: 'roadNum',
    width: '22%',
    key: 'roadNum',
    ellipsis: true
  },
  {
    title: '状态',
    dataIndex: 'cameraonline',
    key: 'cameraonline',
    customRender({ value }) {
      return value === '1' ? '在线' : '异常'
    }
  }
]

onMounted(() => init())
onUnmounted(() => proxy.$bus.off('equipmentRefresh'))
function init() {
  columns.value = bordColumns
  proxy.$bus.on('equipmentRefresh', () => getData()) // 接受设备监测通知刷新
  getData()
  getStatistics()
}
/**
 * 映射情报版字段
 * @param status { Number }  情报版状态
 * @return Object
 * **/
function mapperStatus(staus) {
  const road = roadType.value
  return get(statusObj, `${road}.${staus}`) || {}
}

/**
 * 获取统计与列表数据
 * @param  argParams  {Object}
 * */
function getData(argParams) {
  state.loading = true

  // 情报版状态
  const qbbStatusObj = {
    // [raodType]-[isWaring] 1高速 2公路
    '2-true': '2,3', // 公路异常
    '2-false': '1', // 公路在线
    '1-true': '2,3', // 高速异常
    '1-false': '1' // 高速在线
  }
  if (isQbb.value && !isWaring.value) {
    columns.value = bordColumns.slice(0, 2)
  } else if (isQbb.value) {
    columns.value = bordColumns
  }

  const params = {
    province: 32,
    city: isProvince.value ? null : areaCode.value,
    roadType: roadType.value,
    orgId: orgId.value,
    status: qbbStatusObj[`${roadType.value}-${isWaring.value}`],
    companyType: get(store.state, 'user.bussinessType')
  }

  if (isQbb.value) {
    // 情报版列表
    baseServiceApi
      .getQbbList(params)
      .then(res => {
        console.log('情报版列表', res)
        dataSource.value = res.data || []
        state.loading = false
      })
      .catch(e => {
        console.warn('获取情报版失败', e)
        dataSource.value = []
      })
      .finally(() => (state.loading = false))
  } else {
    // 获取摄像机列表
    const videoParams = {
      kmStake: null,
      hmStake: null,
      lon: null,
      lat: null,
      roadNum: null,
      radius: null,
      province: '32',
      city: '',
      orgId: orgId.value,
      roadType: roadType.value,
      status: isWaring.value ? '2' : '1', // 1在线 2异常,
      companyType: get(store.state, 'user.bussinessType')
    }
    baseServiceApi
      .getCameraList(videoParams)
      .then(res => {
        console.log(res.data)
        dataSource.value = res.data
      })
      .catch(() => (dataSource.value = []))
      .finally(() => (state.loading = false))
  }
}

/**
 * 获取情报版与摄像机统计数据
 * **/
function getStatistics() {
  monitorApi
    .getEquipmentStatistic({
      province: 32,
      city: isProvince.value ? null : areaCode.value,
      roadType: roadType.value,
      orgId: orgId.value,
      companyType: get(store.state, 'user.bussinessType')
    })
    .then(res => {
      state.statistic = res.data || {}
    })
    .catch(() => {
      console.warn('获取统计数据失败')
    })
}
/**
 * @desc 设置切换为情报版列表
 * @param v  { Boolean }
 * **/
function setIsQbb(v) {
  isWaring.value = true
  isQbb.value = v
  if (isQbb.value) columns.value = bordColumns
  else columns.value = videoColumns
  getData()
}

function setStatus(flag) {
  isWaring.value = flag
  getData()
}

/**
 * @desc 处理视频点击
 * @param item
 */
function handleVideoClick(item) {
  handleDark(
    'marker',
    [
      {
        ...item,
        icon: 'zhdd-gl-sxj',
        path: [item.lon, item.lat],
        name: item.cameraName,
        size: [30, 35],
        offset: [-15, -35]
      }
    ],
    {
      type: 'sxj'
    }
  )
}

/**
 * @desc 情报板
 * @param item
 */
function handleQbbClick(item) {
  store.commit('config/SET_DETAIL_CONFIG', {
    data: item
  })
  nextTick(() => {
    // handleDark('marker', [{ icon: 'icon-gs-qbb', path: [119.396572, 32.391775], name: item.vmsName, size: [38, 42] }])
  })
}
</script>

<style scoped lang="less">
@import url(../../styles/themes);

.on-line {
  color: #0bb6a9;
}

.warning {
  color: #fcb634;
}

.off-line {
  color: #a2a3a4;
}

/deep/ .mz-panel-content-main {
  padding: 0;
}

.header-summary {
  display: flex;
  align-items: center;
  margin: 5px 0;

  .switchs {
    display: flex;
    flex: 1;

    .title {
      font-size: 12px;
      height: 12px;
      line-height: 12px;
      color: #000;
      padding: 0 15px;
      cursor: pointer;

      &:hover {
        color: #266bf4;
      }
    }

    .title.qbb {
      margin-left: 12px;
      border-right: 1px solid #c4c4c4;
    }

    .title.is-active {
      display: flex;
      position: relative;
      color: #266bf4;
      transition: all 0.3s;
    }
  }

  .summary-item {
    display: flex;
    flex: 1;
    line-height: 24px;
    height: 100%;
    justify-content: center;

    .active {
      border-bottom: 1px solid;
    }
    .header-common {
      font-size: 14px;
      height: 100%;
      line-height: 24px;
      text-align: center;
      padding: 0 10px;
      cursor: pointer;

      .value {
        padding-left: 3px;
      }
    }
  }
}

.list-wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
  padding: 0 5px 5px 5px;

  .list-header {
    background-color: #dee5f2;

    font-size: 13px;
    line-height: 28px;
    height: 28px;
    color: #000;
    display: flex;
    padding-left: 0.1rem;
  }

  .list-content {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;

    .list-rows {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .video-rows {
      // display: flex;
      // flex-wrap: wrap;
      padding: 0 5px;
      // .video-item:nth-child(1) {
      //   margin-top: 12px;
      // }
      // .video-item:nth-child(2) {
      //   margin-top: 12px;
      // }
    }

    .spin-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .video-item {
      // width: 50%;
      // height: 144px;
      cursor: pointer;

      .video-item-text {
        height: 37px;
        line-height: 37px;
        font-size: 13px;
        color: #333333;
        // text-align: center;
      }

      .video-wrapper {
        height: calc(100% - 37px);
      }
    }

    .empty-box {
      margin: 0 auto;
      height: 100%;

      .empty {
        height: 100%;
      }
    }
  }
}

.w48 {
  width: 48%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.w18 {
  width: 28%;
  text-align: center;
}

.w24 {
  width: 24%;
  text-align: center;
}

.list-row {
  height: 32px;
  line-height: 32px;
  color: #333;
  display: flex;
  padding-left: 10px;
  cursor: pointer;

  &:hover {
    background-color: @row-hover-bg !important;
  }
}

.list-row:nth-child(even) {
  background-color: @row-even-bg;
}

.list-row:nth-child(odd) {
  background-color: @row-odd-bg;
}

.list-row.active {
  background-color: @row-active-bg;
  transition: all 0.3;
}
</style>
